import React, { useEffect, useState, createRef } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { ArrowLeft, Ellipsis, Arrow } from '@react-vant/icons';
import { Image, Button, Popup, Toast, Field, ProductCard, Dialog } from 'react-vant';
import TopTitleBar from "../../components/TopTitleBar";
import "./index.css";
import { baseURL } from '../../utils/contants';
import axios from "../../utils/axios";
import { data } from "browserslist";
const OrderDetail = () => {
    const navigate = useNavigate();
    const [orderList, setOrderList] = useState([]);
    const [orderDetails, setOrderDetails] = useState({})
    const [showPaymentPopup, setShowPaymentPopup] = useState(false)
    const {
        state: { orderNo }
    } = useLocation();

    const getOrderDetails = () => {
        axios.get(`/api/v1/order/${orderNo}`).then(res => {
            if (res.data.message === 'SUCCESS') {
                setOrderDetails(res.data.data)
                setOrderList(res.data.data.newBeeMallOrderItemVOS);
            }
        })
    }

    const handleDelete = () => {
        axios.put(`/api/v1/order/${orderNo}/cancel`).then(res => {
            if (res.data.message === 'SUCCESS') {
                Toast.loading({
                    message: '加载中',
                    forbidClick: true
                })
                setTimeout(() => {
                    getOrderDetails();
                }, 2000)
            }
        }).catch(err => {
        })
    }

    const handleCancelOrder = () => {
        Dialog.show({
            title: '确取消订单？',
            showCancelButton: true,
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            confirmButtonColor: 'red',
            onConfirm: handleDelete
        })
    }
    const handlePayment = (payType) => {
        axios.get(`/api/v1/paySuccess?orderNo=${orderNo}&payType=${payType}`).then(res => {
            if (res.data.message === 'SUCCESS') {
                // 支付成功：1. 把popup 关掉，=》 2. 弹窗：支付成功
                setShowPaymentPopup(false);
                Toast.success('支付成功')

                setTimeout(() => {
                    getOrderDetails();
                }, 3000)
            }
        })
    }
    const toPayment = () => {
        setShowPaymentPopup(true);
    }
    useEffect(() => {
        getOrderDetails();
    }, [])

    return (
        <div className="orderDetail">
            <TopTitleBar
                topTitleBarBackgroundColor='#fff'
                leftIcon={
                    <ArrowLeft onClick={() => navigate(-1)} />
                }
                intermediateContentText="订单详情"
                rightIcon={
                    <Ellipsis />
                }
            />
            <div className="mainContent">
                <div className="contentTop">
                    <Field
                        label='订单状态'
                        value={orderDetails.orderStatusString}
                        readOnly
                        border={false}
                    />
                    <Field
                        label='订单编号'
                        value={orderNo}
                        readOnly
                        border={false}
                    />
                    <Field
                        label='下单时间'
                        value="已支付"
                        readOnly
                        border={false}
                    />
                    {
                        orderDetails.orderStatus === 0 &&
                        <Button
                            className="cancelBtn"
                            block
                            onClick={toPayment}
                            color='#1baeae'
                        >
                            去支付
                        </Button>
                    }
                    {
                        orderDetails.orderStatus !== -1 &&
                        <Button
                            className="cancelBtn"
                            block
                            onClick={handleCancelOrder}
                        >
                            取消订单
                        </Button>
                    }
                </div>
                <div className="contentTop">
                    <Field
                        label='商品金额'
                        value={'￥' + orderDetails.totalPrice}
                        readOnly
                        border={false}
                    />
                    <Field
                        label='配送方式'
                        value="普通快递"
                        readOnly
                        border={false}  //不显示内边框
                    />
                </div>
                <div className="orderList">
                    {
                        orderList.map(
                            product => {
                                return <ProductCard
                                    className="productCard"
                                    key={product.goodsId}
                                    price={'¥' + product.sellingPrice}
                                    desc={product.goodsIntro}
                                    title={product.goodsName}
                                    num={product.goodsCount}
                                    thumb={
                                        String(product.goodsCoverImg).startsWith('http') ?
                                            product.goodsCoverImg :
                                            baseURL + product.goodsCoverImg
                                    }
                                // onClick={() => navigate('/productDetails', {
                                //     state: {
                                //         goodsId: product.goodsId
                                //     }
                                // })}
                                />
                            }
                        )
                    }
                </div>
            </div>
            {
                <Popup
                    onClose={() => setShowPaymentPopup(false)}
                    closeOnClickOverlay
                    style={{ height: '30%', paddingTop: '3rem' }}
                    className='openPopup'
                    description={
                        <div className="popupBtns">
                            <div
                                className="zfbBtn"
                                style={{ marginBottom: '1rem' }}
                            >
                                <Button
                                    color="#1989fa"
                                    type="pro"
                                    text='支付宝支付'
                                    block
                                    onClick={() => handlePayment(1)}  //支付宝 传1，微信传 2
                                />
                            </div>
                            <div
                                className="wxBtn"
                            >

                                <Button
                                    color="#1baeae"
                                    text='微信支付'
                                    block
                                    onClick={() => handlePayment(2)}
                                />
                            </div>
                        </div>
                    }
                    position='bottom'
                    visible={showPaymentPopup}
                    closeable
                />
            }
        </div >
    )
}

export default OrderDetail;